<script lang="ts" setup>
import { defineEmits, ref } from 'vue'

import { prompt, useVbenModal } from '@vben/common-ui'

import { Button, Descriptions, message, Space } from 'ant-design-vue'

import { GoodsPriceLogApproval } from '#/api/goodsPriceLog'

// 定义要发送的事件
type EmitEvents = {
  pushData: {}
}
const emit = defineEmits<EmitEvents>()
const form = ref({})

const [Modal, modalApi] = useVbenModal({
  class: 'w-full max-w-5xl',
  appendToMain: true,
  footer: false,
  onCancel() {
    modalApi.close()
  },
  onConfirm() {},
  onOpenChange: async (isOpen: boolean) => {
    if (!isOpen) return
    const { data } = modalApi.getData<Record<string, any>>()
    console.log(data)
    form.value = data
  },
})

// 价格更新类型映射
const priceUpdate = {
  goodsPrice: '货品资料价格',
  supplyPrice: '货品供应商价格',
}

const statusMap = {
  1: '一审通过',
  2: '二审通过',
  3: '拒绝',
  99: '作废',
}

/**
 * 处理推送按钮点击事件
 */
function approval(status: any) {
  prompt<string>({
    async beforeClose({ isConfirm, value }) {
      if (isConfirm && value === undefined) {
        message.error('请输入处理意见')
        return false
      }
    },
    componentProps: { placeholder: '请输入处理意见' },
    content: `您确定${statusMap[status]}吗？`,
    icon: 'question',
    overlayBlur: 3,
  })
    .then((res) => {
      GoodsPriceLogApproval({ id: form.value.id, status, cancel_text: res }).then((res: any) => {
        if (res.data.code === 1) {
          message.success(res.data.msg)
          emit('pushData')
          modalApi.close()
        } else {
          message.error(res.data.msg)
        }
      })
    })
    .catch(() => {
      console.log("取消")
    })
}
</script>

<template>
  <Modal title="存在价格变更确认">
    <!-- 商品价格变更 -->
    <div v-if="form.updateData?.goodsPrice && form.updateData.goodsPrice.length > 0">
      <h3>{{ priceUpdate.goodsPrice }}变更</h3>
      <Descriptions bordered style="width: 100%; min-width: 800px; margin-bottom: 10px" size="small">
        <template v-for="item in form.updateData.goodsPrice" :key="item.field">
          <Descriptions.Item :label="item.fieldName">
            <div>改前: {{ item.origin }}</div>
            <div style="color: red">改后: {{ item.destination }}</div>
          </Descriptions.Item>
        </template>
      </Descriptions>
    </div>
    <div v-if="form.updateData?.supplyPrice && form.updateData.supplyPrice.length > 0">
      <h3>{{ priceUpdate.supplyPrice }}变更</h3>
      <Descriptions bordered style="width: 100%; min-width: 800px; margin-bottom: 10px" size="small">
        <template v-for="item in form.updateData.supplyPrice" :key="item.field">
          <Descriptions.Item :label="item.fieldName">
            <div>改前: {{ item.origin }}</div>
            <div style="color: red">改后: {{ item.destination }}</div>
          </Descriptions.Item>
        </template>
      </Descriptions>
    </div>
    <Descriptions bordered style="width: 100%; min-width: 800px; margin-bottom: 10px" size="small">
      <Descriptions.Item label="修改原因">
        {{ form.create_text }}
      </Descriptions.Item>
    </Descriptions>
    <div class="modal-footer">
      <Space>
        <Button @click="modalApi.close()">取消</Button>
        <Button @click="approval(99)" v-if="(form.status === 0 || form.status === 1) && form.is_show_cancel">作废</Button>
        <Button @click="approval(3)" type="primary" danger v-if="(form.status === 0 || form.status === 1) && form.is_show_approval">拒绝</Button>
        <Button type="primary" @click="approval(1)" v-if="form.status === 0 && form.is_show_approval">一审通过</Button>
        <Button type="primary" @click="approval(2)" v-if="form.status === 1 && form.is_show_approval">二审通过</Button>
      </Space>
    </div>
  </Modal>
</template>
<style lang="scss" scoped>
.modal-footer {
  margin-top: 24px;
  display: flex;
  justify-content: flex-end;
}
</style>
